<template>
    <!-- 科室 -->
    <div id="office">
        <!-- 响应式布局 -->
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin:0 1%">
                <el-input placeholder="科室名称" v-model="OfficesName"></el-input>
            </el-col>
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin: 0">
                <el-select @change="selectParent"  v-model="valueFactory" clearable placeholder="隶属工厂">
                    <el-option v-for="item in FactoryOptions" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                </el-select>
            </el-col>
            <!-- 隶属部门怎么拿到 -->
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin: 0 1%">
                <el-select v-model="valueParent" clearable clearable placeholder="隶属部门">
                    <el-option v-for="item in ParentOptions" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                </el-select>
            </el-col>
            <el-col :xs="10" :sm="10" :md="8" :lg="6" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="addOffices">新增科室</el-button>
                <!--<el-button type="success" @click="selectParent">父级</el-button>-->
            </el-col>

        </div>
        <!-- max-height 600时就固定表头，显示滚动条  show-overflow-tooltip 表格内容多了可以显示一个提示框显示剩余内容   sortable排序 -->
        <el-table  max-height="600" class="table_office" stripe border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                   style="width: 88%;text-align: center !important;">
            <!--  科室    部门 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>222222222 -->
            <el-table-column prop="index" sortable width="60"></el-table-column>
            <el-table-column prop="OfficeCode" sortable label="科室代码"></el-table-column>
            <el-table-column prop="OfficeName" sortable label="科室名称"></el-table-column>
            <el-table-column prop="DepartmentCode" label="部门代码" v-if="false"></el-table-column>
            <el-table-column prop="DepartmentName" label="部门名称"></el-table-column>
            <el-table-column prop="FactoryName" label="工厂名称"></el-table-column>
            <el-table-column prop="FactoryID" label="工厂代码" v-if="false"></el-table-column>
            <el-table-column prop="HeadCount" sortable label="人员总数"></el-table-column>
            <!--  科室代号  科室名称  部门号  部门名称  -->
            <el-table-column label="人员详情">
                <template scope="scope">
                    <el-button type="primary" size="small" @click="handlePeople(scope.$index, scope.row)">
                        人员
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="OperationUserID" label="操作人员工号" v-if="false"></el-table-column>
            <el-table-column prop="OperationUserName" label="操作人员"></el-table-column>
            <el-table-column prop="ModifyDate" sortable label="时间"></el-table-column>
            <!-- 修改和删除 -->
            <el-table-column label="操作" fixed="right">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>

        <!--  新增科室  必须要选部门 -->
        <el-dialog title="新增科室" :visible.sync="addOfficeFormVisible">
            <el-form :model="form" style="text-align: left;width:90%;margin: auto">
                <!-- 选择工厂的时候就应该把隶属部门拿到 -->
                <el-form-item label="工厂名称" :label-width="formLabelWidth">
                    <el-select @change="selectDepartAdd" v-model="valueFactoryAdd" clearable placeholder="请选择">
                        <el-option  v-for="item in FactoryOptionsAdd" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="隶属部门" :label-width="formLabelWidth">
                    <!-- 隶属部门怎么拿到 -->
                    <el-select v-model="valueDepartAdd" clearable clearable placeholder="部门" style="float: left">
                        <el-option v-for="item in DepartOptionsAdd" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科室代号" :label-width="formLabelWidth">
                    <el-input v-model="form.OfficeCode" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="科室名称" :label-width="formLabelWidth">
                    <el-input v-model="form.OfficeName" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addOfficeFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改部门 -->
        <el-dialog title="修改科室" :visible.sync="EditFormVisible">
            <el-form :model="formEdit" style="text-align: left">
                <el-form-item label="科室代码" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.OfficeCode" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="科室名称" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.OfficeName" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
                <!-- 隶属部门  -->
                <el-form-item label="隶属部门" :label-width="formLabelWidthEdit">
                    <el-select v-model="formEdit.DepartmentCode" clearable placeholder="部门">
                        <el-option v-for="item in EditParentOptions" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除部门 -->
        <el-dialog title="删除科室" :visible.sync="DeleteFormVisible">
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此科室吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 人员详情  》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》 -->
        <el-dialog title="人员详情" :visible.sync="PeopleFormVisible">
            <el-form :model="formPeople" style="">
                <el-table  max-height="600" class="table_office" stripe border ref="mutiplePeopleTable" :data="PeopleTable" tooltip-effect="dark"
                           style="width: 90%;text-align: center !important;">
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <!--<el-table-column prop="formPeople.OfficeName" sortable label="科室名称"></el-table-column>-->
                    <el-table-column prop="EntryDate" sortable label=入职时间></el-table-column>
                    <el-table-column prop="Sex" sortable label="性别"></el-table-column>
                    <el-table-column prop="UserCode" sortable label="工号"></el-table-column>
                    <el-table-column prop="UserName" label="姓名"></el-table-column>
                </el-table>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="PeopleFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="PeopleForm" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){   // 穿梭框
            return{
//      1、 一打开页面就加载  工厂、部门、科室的   下拉框
//      2、点击新增科室    依次加载  工厂、部门下拉框   输入 科室名称等  自动生成科室代码
//      3、点击新增部门    加载  工厂下拉框   输入 部门名称等   自动生成部门代码
//      4、点击编辑    通过表格生成时传过来的值判断   应该编辑 部门还是科室

                //     穿梭框
                DepartDate:[],  //  该工厂下所有部门的人员
                value:[],
                //    表格
                tableData:[],
                FactoryName:'',
                ParentOptions:[],     // 部门
                FactoryOptions:[],    //  工厂   一加载页面就出现工厂的下拉框
                valueFactory:'',    //  选择的是哪个工厂号
                valueParent:'',     //  选择的是哪个部门ID
                //  修改时，获取的部门下拉框
                EditParentOptions:[],
                //  修改时的字段
                OfficesName:'',
                OfficeCode:'',   //  部门号
                DepartmentName:'',   //  部门名
                //  查询的时候传过去的后台参数
                DepartManagerName:'',   //  主管名称
                FactoryID:'' ,   //  工厂号
                //     分页
                PageCount:10,    // 每页几条   page-size
                CurrentPage:1,   // 当前是第几页
                Total:0,    // 总数
                addOfficeFormVisible:false,
                //   新增部门     将 form表单改成自己的参数
                DepartOptionsAdd:[],     // 部门
                FactoryOptionsAdd:[],    //  工厂   一加载页面就出现工厂的下拉框
                valueFactoryAdd:'',    //  选择的是哪个工厂号
                valueDepartAdd:'',     //  选择的是哪个部门ID
                form: {},
                formLabelWidth: '100',
                //  修改部门
                EditFormVisible: false,
                formEdit:{
//                    ParentDepartID: 0,      //   根据该行里面选中的是哪个工厂，从而得到该工厂下面所有的部门
                },
                formLabelWidthEdit:'100',
                //  删除部门
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'100',
                //  详细人员展示
                PeopleFormVisible:false,
                mutiplePeopleTable:[],
                PeopleTable:[],    //  人员表格
                OficeNamePeople:'',  //  科室名称
                formPeople:{},
                formLabelWidthPeople:'100',
            }
        },
        methods:{
            //   一加载页面就应该知道有哪些工厂
            selectFactory(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.$http.get(url,).then(response => {
                    this.FactoryOptions = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.FactoryOptions = response.data.ObjList ;
                    }

                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            //   一选择工厂的时候就应该获取部门
            selectParent(){    // 校验输入信息正确性 ，不对直接  return     FactoryOptions
                let url;
                url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.valueFactory ;
                this.$http.get(url,).then(response => {
                    this.ParentOptions = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.ParentOptions = response.data.ObjList ;
                    }
                    console.log("部门下拉框成功");
                }, response => {
                    console.log(" 部门请求失败");
                    console.log(response)
                })
            },
            //  修改时，获取 部门下拉框
            selectParentEdit(){
                let url;
                url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.formEdit.FactoryID ;
                console.log("编辑下拉框");
                this.$http.get(url,).then(response => {
                    this.EditParentOptions = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.EditParentOptions = response.data.ObjList ;
                    }
//                    console.log("修改的部门下拉框");
//                    console.log(response.data.ObjList)
                }, response => {
                    console.log(" 修改的部门请求失败");
                    console.log(response)
                })
            },
            //   分页
            handleSizeChange(val) {
                this.PageCount = val ;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val ;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //   get  传给后台值  供查询使用  显示部门列表  已完
            selectTable(){
                let url;
                //     加的去空判断
                this.OfficesName = this.OfficesName.trim();
                url = "http://192.168.3.238:8088/OfficeManager/GetOfficePage?OfficesName=" + this.OfficesName +
                    "&DepartCode=" + this.valueParent +
                    "&PageCount=" + this.PageCount + "&CurrentPage=" + this.CurrentPage ;
                console.log("表格url")
                console.log(url)
                this.$http.get(url,).then(response => {
                    // success callback   需要一个alert告诉你查询到了
                    this.tableData=[];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = response.data.Total;
                        for(let i=0;i<response.data.ObjList.length;i++){
                            this.tableData.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("返回")
                    console.log(response)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            //  新增部门
            //   一加载页面就应该知道有哪些工厂
            selectFactoryAdd(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.$http.get(url,).then(response => {
                    this.FactoryOptionsAdd = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.FactoryOptionsAdd = response.data.ObjList ;
                    }

                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            //   一选择工厂的时候就应该获取部门
            selectDepartAdd(){    // 校验输入信息正确性 ，不对直接  return     FactoryOptions
                let url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.valueFactoryAdd ;
                this.$http.get(url,).then(response => {
                    this.DepartOptionsAdd = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.DepartOptionsAdd = response.data.ObjList ;
                    }
                    console.log("部门下拉框成功");
                }, response => {
                    console.log(" 部门请求失败");
                    console.log(response)
                })
            },
            //  新增科室
            addOffices() {
                this.selectFactoryAdd();
                this.addOfficeFormVisible = true;
            },
            addForm(){
                let addUrl = "http://192.168.3.238:8088/OfficeManager/AddOffice";
                let addForm = {
                    "OfficeCode": this.form.OfficeCode,
                    "OfficeName": this.form.OfficeName,
                    "DepartmentCode": this.valueDepartAdd,   //  部门ID
                    "OperationUser": 1,
                };
                console.log("新增")
                console.log(addForm)
                console.log(addUrl)
                let that = this;
                if (this.form.OfficeName.length === 0) {
                    console.log("请输入科室名称");
                    return 0;
                } else {
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            that.addOfficeFormVisible = false;
                            that.selectTable();
                            console.log("添加成功");
                            console.log(response);
//                        需要提示
                        })
                        .catch(function (error) {
                            console.log(error);
                            console.log("错误");
                        });
                }
            },
            //   编辑科室   post
            handleEdit(index, row) {
                this.EditFormVisible = true;
                this.formEdit = row ;
                this.selectParentEdit();
                console.log("修改部门获取的全部字段");
                console.log(this.formEdit);
                //  部门号不能修改，只是作为参数传给后台
            },
            EditForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/OfficeManager/UpdateOffice";
                let EditForm = {
                    "DepartmentCode":this.formEdit.DepartmentCode,     //  隶属部门
                    "OfficeName":this.formEdit.OfficeName,   //  科室名称
                    "OfficeCode":this.formEdit.OfficeCode,   //  科室编码
                    "OperationUser":1
                };
                console.log("编辑科室");
                console.log(EditForm);
                console.log(EditUrl);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //   删除科室
            handleDelete(index, row) {
                this.DeleteFormVisible = true ;
                this.formDelete = row ;
            },
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/OfficeManager/DeleteOffice";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "OfficeCode":this.formDelete.OfficeCode,
                    "OperationUser":1,
                };
                console.log("删除")
                console.log(DeleteUrl)
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("删除成功")
                        console.log(response)
                        that.DeleteFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
//  人员详情
            handlePeople(index, row){
                this.PeopleFormVisible = true ;
                this.formPeople = row ;   // 只需要把选中的部门号给后台就好了
                this.OficeNamePeople = row.OfficeName ;
                console.log("人员详情")
//                console.log(this.formPeople)
//                console.log(this.OficeNamePeople)
                let PeopleUrl = "http://192.168.3.238:8088/UserInfo/GetDepartUser?OfficeCode="+this.formPeople.OfficeCode ;
                console.log("PeopleUrl 》")
//                console.log(PeopleUrl)
                this.$http.get(PeopleUrl,).then(response => {
                    this.PeopleTable = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = response.data.Total;
                        for(let i=0;i<response.data.ObjList.length;i++){
                            this.PeopleTable.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("response  》》》》》》》》》》》》》》》》》》》")
//                    console.log(response)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                });
            },
            PeopleForm(){
                let PeopleUrl = "http://192.168.3.238:8088/Department/AddDepartUser";
                let PeopleItem = {   //  跟后端约定好的JSON格式
                    "JobNumberS": this.value ,
                    "OfficeCode": this.formPeople.OfficeCode,
                };
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(PeopleUrl, PeopleItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("成功")
                        console.log(response);
                        that.PeopleFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
        },
        mounted :function () {   //  onload
            this.selectFactory();   // 请求到工厂的下拉框
            this.selectTable();    //  请求到表格
        }
    }
</script>



<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    #office {
        height: 100%;
    }
    /* 表头数据居中 */
    .table_office thead tr th {
        text-align: center;
    }

</style>